<template>
  <view class="content">
    <uni-notice-bar
      style="margin-bottom: 0"
      single
      showIcon
      showClose
      scrollable
      :text="noticeText"
      :speed="30"
      v-if="useUserStore.notices"
      @click="jumpToMessage"
    />
    <view class="header">
      <swiper class="swiper" indicator-dots="true" indicator-active-color="#184795" autoplay="true" circular="true">
        <swiper-item v-for="i in swipeItems" :key="i.bannerID">
          <image :src="i.bannerURL" mode="scaleToFill" lazy-load="true"></image>
        </swiper-item>
      </swiper>
    </view>
    <Modules />
    <IndexNotice ref="noticesRef" />
  </view>
  <Loading />
</template>

<script setup>
  import Modules from '@/components/modules.vue'
  import IndexNotice from '@/components/IndexNotice.vue'
  import Loading from '@/components/Loading.vue'
  import { onLoad, onPullDownRefresh, onNavigationBarButtonTap } from '@dcloudio/uni-app'
  import { userStore } from '@/store/user.js'
  import { onBeforeMount, ref, defineExpose, onMounted } from 'vue'
  import { GetUserInfo, Verify } from '@/apis/user.js'
  import { GetBannerList } from '@/apis/banner.js'
  import { GetRecentNotices } from '@/apis/notice.js'

  const swipeItems = ref([])
  const noticeText = ref('')
  const useUserStore = userStore()
  const noticesRef = ref()

  function jumpToMessage() {
    uni.navigateTo({
      url: '/pages/message/message'
    })
  }

  function refresh() {
    // 获取通知
    GetRecentNotices().then((res) => {
      useUserStore.setNotices(res.data)
      const n = useUserStore.notices
      const pages = getCurrentPages()
      // app下显示和隐藏小红点 其他平台不显示
      // #ifdef APP-PLUS
      const webview = pages[0].$getAppWebview()
      if (!n) {
        webview.hideTitleNViewButtonRedDot({
          index: 2
        })
      } else {
        webview.showTitleNViewButtonRedDot({
          index: 2
        })
      }
      // #endif
      if (n && n.length === 1) {
        noticeText.value = `近三天您有一条来自${n[0].username}(${n[0].department})的通知，去查看 >`
      } else if (n && n.length > 1) {
        noticeText.value = `近三天您有来自${n[0].username}(${n[0].department})等的${n.length}条通知，去查看 >`
      }
    })
    // 获取banner图
    GetBannerList().then((res) => {
      swipeItems.value = res.result
      // console.log(swipeItems.value);
    })
    // console.log(noticesRef.value);
    noticesRef.value.refresh()
  }

  onMounted(() => {
    refresh()
  })

  onPullDownRefresh(async () => {
    await refresh()
    await uni.stopPullDownRefresh()
  })

  onLoad(() => {
    uni.showTabBar()
    Verify().then((res) => {
      if (!res.logged) {
        uni.reLaunch({
          url: '/pages/login/login'
        })
      } else {
        GetUserInfo().then((res) => {
          useUserStore.setUserInfo(res.data)
          // console.log(res.data);
        })
      }
    })
  })

  onNavigationBarButtonTap((e) => {
    // console.log(e.index);
    switch (e.index) {
      // 跳转至搜索页
      case 0:
        uni.navigateTo({
          url: '/pages/search/search'
        })
        break
      // 跳转至帮助页
      case 1:
        uni.navigateTo({
          url: '/pages/help/help'
        })
        break
      // 跳转至消息页
      case 2:
        uni.navigateTo({
          url: '/pages/message/message'
        })
        break
    }
  })
</script>

<style lang="scss" scoped>
  .content {
    // max-height: calc(100vh - var(--status-bar-height) - 100rpx);
    // height: 100vh;
    width: 100%;
    // overflow: scroll;

    .header {
      height: 200rpx;

      .swiper {
        width: 100%;
        height: 100%;
        aspect-ratio: 1920/551;

        image {
          width: 100%;
          height: 100%;
          // aspect-ratio: 1920/551;
        }
      }
    }
  }
</style>
